

<template>

  <div class="container text-primary" v-if="detail">
    <div id="quotation" class="p-32px">
    <div class="text-center font-bold text-lg pb-2">{{detail.companyName ||'驰询智行（成都）科技有限公司'}}</div>
    <div class="text-center font-bold text-lg pb-6">{{ (!detail.companyName && !detail.companyNameEn)? 'Chixun Zhixing (Chengdu) Technology Co., Ltd' :detail.companyNameEn}}</div>

    <el-row>
      <el-col :sm="24" :md="15">
        <div class="flex mb-4 mr-4">
          <div class="w-100px ">
            <div class="text-left ">Address</div>
            <div class="text-left text-14">地址</div>
          </div>
          <div class="w-full pr-2 pl-2 flex items-center">{{detail.address || '/'}}</div>
        </div>

      </el-col>
      <el-col :sm="24" :md="9">
        <div class="flex mb-4 ">
          <div class="w-100px text-left ">Whatsapp</div>
          <div class="w-full pr-2 pl-2 ">{{detail.whatsapp || '/'}}</div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :sm="24" :md="15">
        <div class="flex mb-4 mr-4">
          <div class="w-100px">
            <div class="text-left ">Phone</div>
            <div class="text-left text-14 ">手机号</div>
          </div>
          <div  class="w-full pr-2 pl-2 flex items-center">{{detail.phone || '/'}}</div>
        </div>

      </el-col>
      <el-col :sm="24" :md="9">
        <div class="flex mb-4 ">
          <div class="w-100px  ">
            <div class="text-left ">E-mail</div>
            <div class="text-left text-14">邮箱</div>
          </div>
          <div  class="w-full pr-2 pl-2 flex items-center">{{detail.email || '/'}}</div>
        </div>
      </el-col>
    </el-row>


    <div style="height: 2px;margin-top: 24px; margin-bottom: 24px;width: 100%;background-color: #4C8F8B"></div>

    <div class="text-center font-bold text-lg pb-6">
      <div class="text-center text-color-primary">QUOTATION</div>
      <div class="text-center text-color-primary">报价单</div>
    </div>

  <div style="font-size: 16px">
      <el-row>
        <el-col :sm="24" :md="15" >
         <div style="color: #fff;background-color: #4C8F8B;padding: 8px;margin-bottom: 16px" >
           Bill To:
         </div>
        </el-col>

      </el-row>


      <el-row>
        <el-col :sm="24" :md="15">
          <div class="flex mb-4 mr-2">
            <div class="w-200px">
              <div class="text-left ">Customer Name</div>
              <div class="text-left text-14">客户名称</div>
            </div>
            <div class="w-full pr-2 pl-2 border-b flex items-end  border-b-[#4C8F8B] pb-2">{{ detail.customerName || '/' }}</div>
          </div>

        </el-col>
        <el-col :sm="24" :md="9">
          <div class="flex mb-4">
            <div class="w-200px">
              <div class="text-left ">Quote Date</div>
              <div class="text-left text-14">报价日期</div>
            </div>
            <div class="w-full pr-2 pl-2 border-b flex items-end  border-b-[#4C8F8B] pb-2">{{formatDateEn(detail.createTime)}}</div>
          </div>
        </el-col>
      </el-row>


      <el-row>
        <el-col :sm="24" :md="15">
          <div class="flex mb-4 mr-2">
            <div class="w-200px">
              <div class="text-left ">Company Name</div>
              <div class="text-left text-14">企业名称</div>
            </div>
            <div class="w-full pr-2 pl-2 border-b flex items-end  border-b-[#4C8F8B] pb-2">{{ detail.customerCompany  || '/'}}</div>
          </div>

        </el-col>
        <el-col :sm="24" :md="9">
          <div class="flex mb-4 ">
            <div class="w-200px">
              <div class="text-left ">Due Date</div>
              <div class="text-left text-14">过期日期</div>
            </div>
            <div class="w-full pr-2 pl-2 border-b flex items-end  border-b-[#4C8F8B] pb-2">{{formatDateEn(detail.dueDate) || '/'}}</div>
          </div>
        </el-col>
      </el-row>


      <el-row>
        <el-col :sm="24" :md="15">
          <div class="flex mb-4">
            <div class="w-200px">
              <div class="text-left ">Address</div>
              <div class="text-left text-14">地址</div>
            </div>
            <div class="w-full pr-2 pl-2 border-b flex items-end border-b-[#4C8F8B] pb-2">{{ detail.customerAddress || '/'}}</div>
          </div>

        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="24" :md="15">
          <div class="flex mb-4">
            <div class="w-200px">
              <div class="text-left ">Phone</div>
              <div class="text-left text-14">电话</div>
            </div>
            <div class="w-full pr-2 pl-2 border-b flex items-end  border-b-[#4C8F8B] pb-2">{{ detail.customerPhone || '/'}}</div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :sm="24" :md="15">
          <div class="flex mb-4">
            <div class="w-200px">
              <div class="text-left ">E-mail</div>
              <div class="text-left text-14">邮箱</div>
            </div>
            <div class="w-full pr-2 pl-2 border-b flex items-end  border-b-[#4C8F8B] pb-2">{{ detail.customerEmail || '/'}}</div>
          </div>

        </el-col>
      </el-row>

    </div>
    <div class="table-wrapper">
   <table >
   <thead>
   <tr>
     <th>
       <div class="font-bold">
         <div class="text-center ">No.</div>
         <div class="text-center text-14">序号</div>
       </div>

     </th>
     <th>
       <div class="font-bold">
         <div class="text-center ">Picture</div>
         <div class="text-center text-14">图片</div>
       </div>
     </th>
     <th>
       <div class=" font-bold">
         <div class="text-center ">Model</div>
         <div class="text-center text-14">车型</div>
       </div>
     </th>
     <th>
       <div class=" font-bold">
         <div class="text-center ">Quantity</div>
         <div class="text-center text-14">数量</div>
       </div>
     </th>
     <th>
       <div class=" font-bold">
         <div class="text-center text-14">人民币(¥)</div>
       </div>
     </th>
     <th>
       <div class=" font-bold">
         <div class="text-center text-14"> {{detail?.data ? JSON.parse(detail.data).rate.text:''}}({{detail?.data ?JSON.parse(detail.data).rate.icon :''}})</div>
       </div>
      </th>
   </tr>
   </thead>
     <tbody>
     <tr>
       <td>{{1}}</td>
       <td>
         <img :src="detail?.carImage" class="image"  referrerPolicy="no-referrer" @error="errorImg" />
       </td>
       <td>{{detail?.carName}}</td>
       <td>x{{detail?.sum}}</td>
       <td>¥{{detail?.price}}</td>
       <td>{{ detail?.data ? JSON.parse(detail.data).rate.icon : '' }}{{ detail?.foreignPrice }}</td>
     </tr>

   </tbody>
   </table>
    </div>
   <div class="font-bold text-color-primary mt-4">
     remarks
   </div>
    <div class="pl-4 text-color-primary text-14 mt-2">
      <p>1. Price Terms (价格条款)：{{detail?.data ?JSON.parse(detail?.data).tradeMode:''}}</p>
      <p>2. Validity (价格有效期)：{{formatDateEn(detail.dueDate)}}</p>
    </div>
      <div class="h-60px"></div>
    </div>

    <div>
      <el-button class="w-full" type="primary" @click="download">下载报价单</el-button>
    </div>
    <div class="h-60px"></div>
  </div>
  <div v-else>
    <el-empty description="无报价数据"></el-empty>
  </div>


</template>
<script>

import templateCarImg from "@/assets/images/template-car.jpg"
import {autoPicture} from "@/utils/ruoyi"
export default {
  name: "Download",
  props: {
    detail: {
      type: Object,
      default: () => {
        return {
          data: {},
        };
      },
    },
  },
  data() {
    return {
      templateCar:templateCarImg,
      isPc:window.innerWidth >=768,
    };
  },
  methods: {
    errorImg(e) {
      e.target.src = templateCarImg;
    },
   async download(){
      if (!this.isPc){
        this.$modal.msgSuccess("请使用PC页面打开下载");
        return;
      }
      let url= await autoPicture("quotation",3);
      if (url){
        const a = document.createElement('a');
        a.href  = url;
        a.download  = this.detail?.carName+'.png';
        a.click();
      }
    }
  },
  created() {
    this.isPc = window.innerWidth >= 768;
    window.addEventListener('resize',  function() {
      this.isPc = window.innerWidth >= 768;
    });
  },
};
</script>
<style scoped lang="scss">
.container {
  max-width: 1000px;
  margin: 0 auto;
}

td {
  padding: 10px;
  border: 1px solid #303133;
  text-align: center;

}
th{
  padding: 10px;
  border: 1px solid #303133;
  background-color: #4C8F8B;
  color: #fff;

}
table {
  border: 1px solid #303133;
  text-align: center;
  width: max-content;
  max-width: max-content;
  overflow-x: auto;


  border-collapse: collapse;  /* 合并边框 */
  border-spacing: 0;         /* 移除单元格间距 */
  margin: 0;                /* 移除外边距 */
  padding: 0;               /* 移除内边距 */
  background: transparent;  /* 透明背景 */
}
@media (min-width: 768px) {
  table {
    //border: 1px solid #303133;
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}
.table-wrapper {
  padding: 10px 0 ;
  overflow-x: auto;
  max-width: calc(100vw - 78px);
  scrollbar-width: thin;
  scrollbar-color: #909399 transparent;
}

::-webkit-scrollbar {
  width: 2px;
  height: 1px;

}
.text-center {
  text-align: center;
}
.font-bold {
 font-weight: bold;
}
.text-lg {
  font-size: 16px;
}
.image {
  width: 160px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
}
.text-color-primary {
  color: #4C8F8B;
}
.w-full {
  width: 100%;
}
.pl-4 {
  padding-left: 16px;
}
.mt-2 {
  margin-top: 8px;
}
.mb-4{
  margin-bottom: 16px;
}
.mr-4 {
  margin-right: 16px;
}
.mr-2 {
  margin-right: 8px;
}
.mt-4 {
  margin-top: 16px;
}
.text-14 {
  font-size: 14px;
}
.pb-6 {
  padding-bottom: 24px;
}
.pb-2 {
  padding-bottom: 8px;
}
.pr-2 {
  padding-right: 8px;
}
.pl-2 {
  padding-left: 8px;
}
.flex {
  display: flex;
}
.text-left {
  text-align: left;
}
.items-center {
  align-items: center;
}
.border-b {
  border-bottom: 1px solid #4C8F8B;
}
.p-32px {
  padding:32px;
}
.w-100px {
 width: 100px;
}
.w-200px {
  width: 200px;
}
.h-60px {
  height: 60px;
}
</style>
